<!-- 收款账户 -->
<template>
  <div class="page-container">
    <el-card>
      <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="150px">
        <div>
          <div class="con-item">银行卡收款信息</div>
          <el-form-item label="持卡人姓名：" prop="full_name" >
            <el-input v-model="form.full_name" />
          </el-form-item>
          <el-form-item label="银行卡号：" prop="bank_account" >
            <el-input v-model="form.bank_account" />
          </el-form-item>
          <el-form-item label="手机号码：" prop="phone" >
            <el-input v-model="form.phone" />
          </el-form-item>
          <el-form-item label="开户行:" prop="bank_name" >
            <el-input v-model="form.bank_name" />
          </el-form-item>
        </div>
        <!-- <div>
          <div class="con-item">USDT收款信息</div>
          <el-form-item label="USDT TRC20地址：">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="USDT ERC20地址：">
            <el-input v-model="form.name" />
          </el-form-item>
        </div>
        <div>
          <div class="con-item">ETH收款信息</div>
          <el-form-item label="ETH地址：">
            <el-input v-model="form.name" />
          </el-form-item>
        </div> -->

        <el-form-item>
          <el-button class="pd-15-30" type="primary" @click="onSubmit">创建</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { reactive, toRefs, ref, toRaw, onMounted } from 'vue'
// import uploadImage from '@/components/Upload/image.vue'
import { update, account } from '@/api/account.js'
import { ElNotification } from 'element-plus'

export default {
  // components: { uploadImage },
  setup () {
    const state = reactive({
      form: {}
    })
    const rules = reactive({
      full_name: [
        { required: true, message: '请输入持卡人姓名', trigger: 'blur' }
      ],
      bank_account: [
        { required: true, message: '请输入银行卡号', trigger: 'blur' }
      ],
      phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' }
      ],
      bank_name: [
        { required: true, message: '请输入开户行', trigger: 'blur' }
      ]
    })
    onMounted(() => {
      getaccount()
    })
    const getaccount = async () => {
      try {
        const res = await account()
        console.log(res)
        state.form = res
      } catch (err) {
        console.log(err)
      }
    }
    const ruleFormRef = ref(null)
    const onSubmit = async () => {
      ruleFormRef.value.validate(async valid => {
        if (!valid) return false
        updatedata()
      })
    }

    const updatedata = async () => {
      try {
        const params = toRaw(state.form)
        const res = await update(params)
        console.log(res)
        ElNotification.success('创建成功')
        getaccount()
      } catch (err) { console.log(err) }
    }

    return {
      ...toRefs(state),
      rules,
      onSubmit,
      ruleFormRef,
      updatedata
    }
  }
}
</script>

<style lang="scss" scoped>
.con-item {
  margin: 10px 0;
}
</style>
